/* ============================ 基础容器  ============================*/
.icon-dynamic-container {
  display: flex;
  justify-content: center;
}

.icon-wrapper {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  margin: 1rem;
  text-align: center;
  position: relative;
}

/* ============================ 圆形图标  ============================*/
.icon-circle {
  --icon-size: 60px;
  --icon-logo-bg: #41bf46;
  --logo-color: #ffffff;
  --logo-size: 1rem;
  --icon-title-color: #48566b;
  --icon-radius: 50%;
  --icon-shadow: 0 6px 12px rgba(0,0,0,0.2);

  width: var(--icon-size);
  height: var(--icon-size);
  background: var(--icon-logo-bg);
  border-radius: var(--icon-radius);
  display: flex !important;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  font-size: calc(var(--icon-size) * 0.4);
  cursor: default;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

/* ============================ 图标尺寸  ============================*/
.icon-circle.small {
  --icon-size: 30px;
}

.icon-circle.medium {
  --icon-size: 50px;
}

.icon-circle.large {
  --icon-size: 80px;
}

/* ============================ 图标logo  ============================*/
.icon-logo {
  color: var(--logo-color);
  font-size: var(--logo-size);
  user-select: none;
  position: relative;
  z-index: 2;
  text-decoration: none;
}

/* ============================ 图标标题  ============================*/
.icon-title {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--icon-title-color);
  word-break: normal; /* 默认行为 */
  overflow-wrap: break-word; /* 智能换行 */
}

/* ============================ 图标阴影  ============================*/
.icon-circle.has-shadow {
  box-shadow: var(--icon-shadow);
}

/* ============================ 悬浮提示  ============================*/
.icon-circle:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* ============================ 动画效果  ============================*/
.icon-circle.spin:hover {
  animation-duration: 0.7s;
}

.icon-circle.pulse {
  animation: pulse 2s infinite ease-in-out;
}

.icon-circle.float {
  animation: float 3s infinite ease-in-out;
}

.icon-circle.spin {
  animation: spin 1.5s infinite linear;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}